{{define "pills_groups_tab"}}
<div>
    <div class="p-4">
        <div class="user-chat-nav float-right">
            <div  data-toggle="tooltip" data-placement="bottom" title="Create group">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-link text-decoration-none text-muted font-size-18 py-0" data-toggle="modal" data-target="#addgroup-exampleModal">
                    <i class="ri-group-line mr-1"></i>
                </button>
            </div>

        </div>
        <h4 class="mb-4">群组</h4>

        <!-- Start add group Modal -->
        <div class="modal fade" id="addgroup-exampleModal" tabindex="-1" role="dialog" aria-labelledby="addgroup-exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-size-16" id="addgroup-exampleModalLabel">创建新的群</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        </div>
                    <div class="modal-body p-4">
                        <form>
                            <div class="form-group mb-4">
                                <label for="addgroupname-input">群名称</label>
                                <input type="text" class="form-control" id="addgroupname-input" placeholder="Enter Group Name">
                            </div>
                            <div class="form-group mb-4">
                                <label>群组成员</label>
                                <div class="mb-3">
                                    <button class="btn btn-light btn-sm" type="button" data-toggle="collapse" data-target="#groupmembercollapse" aria-expanded="false" aria-controls="groupmembercollapse">
                                        请选择人员
                                    </button>
                                </div>

                                <div class="collapse" id="groupmembercollapse">
                                    <div class="card border">
                                        <div class="card-header">
                                            <h5 class="font-size-15 mb-0">联系人</h5>
                                        </div>
                                        <div class="card-body p-2">
                                            <div data-simplebar style="max-height: 150px;">
                                                <div>
                                                    <div class="p-3 font-weight-bold text-primary">
                                                        A
                                                    </div>

                                                    <ul class="list-unstyled contact-list">
                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck1" checked>
                                                                <label class="custom-control-label" for="memberCheck1">李继超</label>
                                                            </div>
                                                        </li>

                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck2">
                                                                <label class="custom-control-label" for="memberCheck2">李鹏飞</label>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>

                                                <div>
                                                    <div class="p-3 font-weight-bold text-primary">
                                                        C
                                                    </div>

                                                    <ul class="list-unstyled contact-list">
                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck3">
                                                                <label class="custom-control-label" for="memberCheck3">常海兵</label>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </div>

                                                <div>
                                                    <div class="p-3 font-weight-bold text-primary">
                                                        D
                                                    </div>

                                                    <ul class="list-unstyled contact-list">
                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck4">
                                                                <label class="custom-control-label" for="memberCheck4">常旭阳</label>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </div>

                                                <div>
                                                    <div class="p-3 font-weight-bold text-primary">
                                                        I
                                                    </div>

                                                    <ul class="list-unstyled contact-list">
                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck5">
                                                                <label class="custom-control-label" for="memberCheck5">爱德华</label>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </div>

                                                <div>
                                                    <div class="p-3 font-weight-bold text-primary">
                                                        J
                                                    </div>

                                                    <ul class="list-unstyled contact-list">
                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck6">
                                                                <label class="custom-control-label" for="memberCheck6">冀翔</label>
                                                            </div>
                                                        </li>

                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck7">
                                                                <label class="custom-control-label" for="memberCheck7">九儿</label>
                                                            </div>
                                                        </li>

                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck8">
                                                                <label class="custom-control-label" for="memberCheck8">玖玖</label>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </div>

                                                <div>
                                                    <div class="p-3 font-weight-bold text-primary">
                                                        M
                                                    </div>

                                                    <ul class="list-unstyled contact-list">
                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck9">
                                                                <label class="custom-control-label" for="memberCheck9">马洪玉</label>
                                                            </div>
                                                        </li>

                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck10">
                                                                <label class="custom-control-label" for="memberCheck10">马振州</label>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </div>

                                                <div>
                                                    <div class="p-3 font-weight-bold text-primary">
                                                        P
                                                    </div>

                                                    <ul class="list-unstyled contact-list">
                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck11">
                                                                <label class="custom-control-label" for="memberCheck11">彭德怀</label>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </div>

                                                <div>
                                                    <div class="p-3 font-weight-bold text-primary">
                                                        R
                                                    </div>

                                                    <ul class="list-unstyled contact-list">
                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck12">
                                                                <label class="custom-control-label" for="memberCheck12">荣德意</label>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </div>

                                                <div>
                                                    <div class="p-3 font-weight-bold text-primary">
                                                        S
                                                    </div>

                                                    <ul class="list-unstyled contact-list">
                                                        <li>
                                                            <div class="custom-control custom-checkbox">
                                                                <input type="checkbox" class="custom-control-input" id="memberCheck13">
                                                                <label class="custom-control-label" for="memberCheck13">宋青辰</label>
                                                            </div>
                                                        </li>

                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addgroupdescription-input">描述</label>
                                <textarea class="form-control" id="addgroupdescription-input" rows="3" placeholder="请输入描述"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End add group Modal -->

        <div class="search-box chat-search-box">
            <div class="input-group bg-light  input-group-lg rounded-lg">
                <div class="input-group-prepend">
                    <button class="btn btn-link text-decoration-none text-muted pr-1" type="button">
                        <i class="ri-search-line search-icon font-size-18"></i>
                    </button>
                </div>
                <input type="text" class="form-control bg-light" placeholder="搜索群...">
            </div>
        </div>
        <!-- end search-box -->
    </div>

    <!-- Start chat-group-list -->
    <div class="p-4 chat-message-list chat-group-list" data-simplebar>


        <ul class="list-unstyled chat-list">
            <li>
                <a href="#">
                    <div class="media align-items-center">
                        <div class="chat-user-img mr-3">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                    G
                                </span>
                            </div>
                        </div>
                        <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-14 mb-0">#Java</h5>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="media align-items-center">
                        <div class="chat-user-img mr-3">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                    R
                                </span>
                            </div>
                        </div>
                        <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-14 mb-0">#Python <span class="badge badge-soft-danger badge-pill float-right">+23</span></h5>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="media align-items-center">
                        <div class="chat-user-img mr-3">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                    D
                                </span>
                            </div>
                        </div>
                        <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-14 mb-0">#Go</h5>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="media align-items-center">
                        <div class="chat-user-img mr-3">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                    D
                                </span>
                            </div>
                        </div>
                        <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-14 mb-0">#C++ <span class="badge badge-soft-danger badge-pill float-right">New</span></h5>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="media align-items-center">
                        <div class="chat-user-img mr-3">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                    P
                                </span>
                            </div>
                        </div>
                        <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-14 mb-0">#C++</h5>
                        </div>
                    </div>
                </a>
            </li>

            <li>
                <a href="#">
                    <div class="media align-items-center">
                        <div class="chat-user-img mr-3">
                            <div class="avatar-xs">
                                <span class="avatar-title rounded-circle bg-soft-primary text-primary">
                                    B
                                </span>
                            </div>
                        </div>
                        <div class="media-body overflow-hidden">
                            <h5 class="text-truncate font-size-14 mb-0">#K8s</h5>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!-- End chat-group-list -->
</div>
{{end}}